<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
  <meta charset="UTF-8">
  <script type="text/javascript">

    //模拟一段JSON数据，实际要从数据库中读取
    var per = [
      {id:001,name:'张珊',job:'学生'},
      {id:002,name:'李斯',job:'教师'},
      {id:003,name:'王武',job:'经理'}
    ];

    window.onload = function(){
      var tbody = document.getElementById('tbMain');

      for(var i = 0;i < per.length; i++){ //遍历一下json数据
        var trow = getDataRow(per[i]); //定义一个方法,返回tr数据
        tbody.appendChild(trow);
      }

    }

    function getDataRow(h){
      var row = document.createElement('tr'); //创建行

      var idCell = document.createElement('td'); //创建第一列id
      idCell.innerHTML = h.id; //填充数据
      row.appendChild(idCell); //加入行  ，下面类似

      var nameCell = document.createElement('td');//创建第二列name
      nameCell.innerHTML = h.name;
      row.appendChild(nameCell);

      var jobCell = document.createElement('td');//创建第三列job
      jobCell.innerHTML = h.job;
      row.appendChild(jobCell);

      //到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮

      var delCell = document.createElement('td');//创建第四列，操作列
      row.appendChild(delCell);
      var btnDel = document.createElement('a'); //创建一个input控件
      btnDel.setAttribute("onclick","del(this)"); //type="button"
      btnDel.setAttribute("herf","javascript:viod(0)");
      btnDel.innerHTML = "×";
      delCell.appendChild(btnDel);  //把删除按钮加入td，别忘了
      return row; //返回tr数据
    }


    function del(obj) {
      var judge = confirm("确认删除吗?");
      if(judge == true) {
        tdNode = obj.parentNode;//得到td
        trNOde = tdNode.parentNode;//得到tr
        tbNOde = trNOde.parentNode;//得到table
        tbNOde.removeChild(trNOde);
      }
    }
  </script>
</head>
<body>
<table width="600" border="1" cellspacing="0">
  <thead>
  <tr>
    <th>编号</th>
    <th>姓名</th>
    <th>职位</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody id="tbMain" style="text-align: center"></tbody>
</table>
</body>
</html>